/* 
*   public part (demo) of project
*   filename: demo.scss
*/ 

/* define box_mod */
@mixin box_mod( $box_width:inherit, $box_height:inherit, $box_bgc:transparent) {
    width: $box_width;
    height: $box_height;
    background-color: $box_bgc;    
}

/* reuse part */
@mixin recode_inline_block {
    display: inline-block;
    vertical-align: top;
}
@mixin nowrap_p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* init float */
.fl{
    float: left;
}
.fr{
    float: right;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

/* rewrite <p> style */
.p_title{
    font-size: 12px;
    font-weight: normal;
    font-family: SimHei, Arial,"Microsoft YaHei","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
    line-height: 20px;

    width: 330px;
    color: white;
}
/*
*   rewrite input/textarea style
*   draw new style with <div>
*/
.ipt_text{
    @include box_mod(100px,40px,#5d6d7e );
    border-radius: 3px;
}
.ipt_text_area{
    @extend .ipt_text;
    width: 200px;
    height: 144px;
}
input{
    box-sizing: border-box;
    width: inherit;
    line-height: 40px;
    padding-left: 12px;
    padding-right: 12px;
    color: white;
}
input::-webkit-input-placeholder {
    color: #a9b0b8;
    font-size: 12px;
    text-align: left;
}
textarea{
    box-sizing: border-box;
    width: inherit;
    height: inherit;
    padding: 12px;
    color: white;
}
textarea::-webkit-input-placeholder {
    color: #a9b0b8;
    font-size: 12px;
    text-align: left;
}
/*
*   draw triangle
*/
.triangle{
    width: 0;
    height: 0;

    border-right: 18px solid transparent;
    border-bottom: 29px solid #2c3e50;
    border-left: 18px solid transparent;
}
/*****************************/
/********布局******************/
/*****************************/
body{
    font-size: 0;
}

.web{
    @include box_mod(1280px,inherit,white);
    margin: 0 auto;

    .header{
        @include box_mod(inherit,125px , white );
        box-sizing: border-box;
        padding: 15px 161px 31px 179px;

        .logo{
            @include box_mod(249px,34px ,white );
            @include recode_inline_block;
            margin-top: 34px;
            overflow: hidden;

            img{
                width: 100%;
                height: 100%;
            }
        }

        .header_right{
            @include box_mod(578px,79px ,transparent );
            @include recode_inline_block;

            .nav_s{
                height: 14px;
                li{
                    width: 57px;
                    text-align: center;
                    border-left: 1px solid #b3b2b2;

                    &:last-child{
                        border-left: 0;
                    }
                }
                p{
                    // 字体样式
                    font-size: 12px;
                    line-height: 14px;
                    letter-spacing: 0px;
                    font-family: SimHei, Arial,"Microsoft YaHei","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
                    color: #b3b2b2;
                    // 防止文本溢出
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    &:hover{
                        color: #3498db;
                    }
                }
            }

            .nav_l{
                    height: 31px;
                    margin-top: 30px;
                    li{
                        text-align: center;
                        border-bottom: 4px solid transparent;
                        padding-left: 12px;
                        padding-right: 12px;
                        
                    }
                    .current_li{
                        border-bottom-color: #1abc9c;
                        p{
                            color: #f64f5b;
                        }
                    }

                    &:hover li{
                        border-bottom-color: transparent;
                        p{
                            color: #7a7878;
                        }
                    }

                    li:hover{
                        border-bottom-color: #1abc9c;
                        p{
                            color: #f64f5b;
                        }
                    }
                    p{
                        font-size: 14px;
                        font-weight: bold;
                        line-height: 31px;
                        letter-spacing: 0px;
                        font-family: SimHei,Arial,"Microsoft YaHei","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
                        color: #7a7878;
                        // 防止文本溢出
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
            }
        }
    }

    .footer{
        width: inherit;

        .msg{
            @include box_mod(inherit,423px ,#38373d );
            font-size: 0;
            .msg_area{
                @include box_mod(672px,inherit,  );
                box-sizing: border-box;
                @include recode_inline_block;
                padding-top: 194px;
                padding-left: 164px;

                .qrcode_area{
                     @include box_mod(139px,149px , );
                     @include recode_inline_block();
                     text-align: center;
                     .qrcode_img{
                         @include recode_inline_block();
                         width: 119px;
                         height: 119px;
                         overflow: hidden;
                        
                         img{
                            width: 100%;
                            height: 100%;
                        }
                     }
                     p{
                         font-size: 12px;
                         font-weight: normal;
                         font-family: SimHei,Arial,"Microsoft YaHei","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
                         line-height: 30px;
                         color: white;
                     }
                }
                .connection_area{
                    @include box_mod(330px,149px , );
                    @include recode_inline_block();
                    padding-left: 20px;

                    .connection_info{
                        @extend .p_title;
                         i{
                             @include recode_inline_block();
                             width: 30px;
                         }
                         p{
                             @include recode_inline_block();
                             width: 280px;
                         }
                    }
                    .connection_title{
                        height: 16px;
                        font-size: 16px;
                        line-height: 16px;
                        // display: block;
                    }
                    .connection_tel{
                        margin-top: 24px;
                    }
                    .connection_mailbox, .connection_address{
                        margin-top: 12px;
                    }
                    .connection_address{
                        letter-spacing: 1px;
                    }
                }

            }
            .form_area{
                @include box_mod(608px,inherit, #38373d);
                box-sizing: border-box;
                @include recode_inline_block;
                padding-right: 216px;
                padding-top: 61px;

                .form_title{
                    font-size: 16px;
                }

                form{
                    padding-top: 10px;
                    .ipt_name{
                        width: 170px;
                        @include recode_inline_block();
                        margin-right: 21px;
                    }
                    .ipt_mailbox{
                        width: 200px;
                        @include recode_inline_block();
                    }
                    .ipt_title{
                        width: 391px;
                        margin-top: 11px;
                    }
                    .ipt_words{
                        width: 391px;
                        margin-top: 10px;
                    }
                    .btn_submit{
                        width: 98px;
                        height: 30px;
                        background-color: #3498db;
                        margin-top: 10px;
                        
                        input{
                            line-height: 30px;
                            color: white;
                            cursor: pointer;   
                        }
                        &:hover{
                            background-color: #115ae0;
                        }
                    }
                }
            }
        }
        .copyright{
            @include box_mod(inherit,118px ,#2c3e50 );
            position: relative;
            text-align: center;
            box-sizing: border-box;
            padding-top: 40px;

            .triangle{
                position: absolute;
                left: calc( 50% - 36px );
                top: -29px;
            }
            .cr_company_name{
                width: inherit;
                font-size: 14px;
            }
            .cr_copyright{
                width: inherit;
                margin-top: 9px;
            }

        }
    }
}
